<template>
  <div class="home">
    <header class="tc ">
      <h1 class="title pr pr20 pl20 f35 cfff fn">
        <router-link class="img pa cfff" to="/upConfirmOrder">
          <i class="el-icon-arrow-left  f40 "></i>
        </router-link>
        订单详情
      </h1>
    </header>
    <nav class="p20 cfff f20">
      <p class="f25 pl30 mb40">支付成功，请您前往指定门店消费</p>
      <div class="flex jcsb pl30 pr30 mb45">
        <div>
          <p class="mb25">
            <img class="store mr10" src="../../../assets/img/wash-car-img/store-white.png">
            <span class="f30">{{ obj.storeName }}</span>
          </p>
          <p class="ml50">{{ obj.address }}</p>
        </div>
        <a href="#">
          <img src="../../../assets/img/wash-car-img/plane-white.png" @click="navigation">
        </a>
      </div>
    </nav>
    <main class="p20">
      <section class="main-order bcfff mb20 f25">
        <ul class="info ">
          <h2 class="mb15 f30 fn">订单详情</h2>
          <div class="line mb40" style="height:7rem"></div>
          <li class="flex jcsb">
            <span>车辆精洗</span>
            <p class=" asc f30">￥{{ obj.realPrice }}</p>
          </li>
          <li class="flex jcsb">
            <span>车辆附加费用</span>
            <p class=" asc">{{ obj.addPrice }}</p>
          </li>
          <li class="line" style="height:2rem"></li>
          <li class="flex jcsb">
            <span>原价</span>
            <p class=" asc f30">￥{{ obj.falsePrice }}</p>
          </li>
          <li class="flex jcsb">
            <span>店家优惠</span>
            <p class=" asc cff40">-￥{{ obj.storeCard }}</p>
          </li>
          <li class="line " style="height:4rem"></li>
          <li class="flex jcsb">
            <span>优惠劵</span>
            <p class=" asc cff40 ">-￥{{ obj.card }}</p>
          </li>
          <li class="line " style="height:7rem"></li>
          <li class="flex jcsb mb5 f30">
            <span>支付金额</span>
            <p class=" asc c21ca">-￥{{ obj.money }}</p>
          </li>
        </ul>
      </section>
      <section class="bcfff mb20 f25">
        <ul class="info ">
          <h2 class="mb15 f30">订单信息</h2>
          <div class="line mb40" style="height:7rem"></div>
          <li class="flex jcsb">
            <span>订单号:</span>
            <p class=" asc f25 c808">{{ obj.orderNum }}</p>
          </li>
          <li class="flex jcsb">
            <span>下单时间:</span>
            <p class=" asc f25 c808">{{ obj.time }}</p>
          </li>
          <li class="flex jcsb">
            <span>车辆:</span>
            <p class=" asc c808">{{ obj.carName }}</p>
          </li>
        </ul>
      </section>
    </main>
  </div>
</template>
<script>
export default {
  methods: {
    navigation(){
      console.log(1);
      this.$router.push({
        path:'/upNavigation'
      })
    }
  },
  data() {
    return {
      obj: {
        storeName: "伟业汽车美容店(人民路店)",
        address: "山阳区人民中路33号",
        realPrice: 39.90,
        addPrice: 0,
        falsePrice: 59.90,
        storeCard: 20,
        card: 10,
        money: 29.9,
        orderNum: "121212112487878",
        time: `2020.01.08  17:40`,
        carName: "奔驰FWE4/豫A98FHJ"
      }
    }
  }
}
</script>
<style scoped>
.c21ca {
  color: #21ca59;
}

.cff40 {
  color: #ff4000;
}

.c297e {
  color: #297efa;
}

.c808 {
  color: #808080;
}

.mb35 {
  margin-bottom: 35rem;
}

.asc {
  align-self: center;
}

.line {
  height: 1rem;
  background-color: #f7f7f7;
}

.home {
  background-color: #f7f7f7;
}

/* 头部样式  ---需要可剪切 */
header .title {
  height: 145rem;
  line-height: 145rem;
}

header {
  height: 435rem;
  background-color: #3385fd;
}

header .img {
  width: auto;
  left: 20rem;
  top: 0;
}

nav {
  margin-top: -310rem;
}

nav img {
  width: 35rem;
  height: auto;
  vertical-align: middle;
}

/* 手机端必须加上这一句--体验感 */
main {
  margin-bottom: 20rem;
}

main section {
  padding: 40rem 30rem;
  border-radius: 20rem;
  box-sizing: border-box;
}

section ul.info li {
  margin-bottom: 38rem;
}
</style>